<template>
	<div>
		<div style="height: 640px; background-color: #aaaaff;">
			<van-overlay :show="loading">
				<van-loading class="me-loading" type="spinner" color="#1989fa" size="50px" />
			</van-overlay>

			<!-- 登录界面按钮 -->
			<div v-show="isLogin === false">
				<van-row @click="onRegLog()" style="margin-top: 20px; background-color: #00FFFF;">
					<van-icon name="manager" size="50" style="margin-top: 20px;" />
					<p>登录/注册</p>
				</van-row>
			</div>

			<!-- 已登录 -->
			<div v-show="isLogin === true">
				<van-nav-bar title="个人中心" right-text="退出登录" @click-right="onLogout" style="background-color: #00FFFF; margin-bottom: 1px;" />
				<van-row type="flex" style="background-color: #00FFFF;">
					<van-image round width="5rem" height="5rem" fit="cover" src="https://img.yzcdn.cn/vant/cat.jpeg" style="padding: 5px;" />
					<p style="display: flex; align-items: center; font-size: 25px;">{{user.username}}</p>
				</van-row>
				<van-row style="margin-top: 1px;">
					<van-grid>
						<van-grid-item icon="star" text="我的收藏" @click="onMyCollect(user.userId)" />
						<van-grid-item icon="manager" text="我的信息" @click="onMyInfo" />
						<van-grid-item icon="question" text="问题反馈"  @click="onQuestion"/>
						<van-grid-item icon="info" text="关于" @click="onAbout"/>
					</van-grid>
				</van-row>
			</div>

		</div>
		<CarTabbar :active="tabbarName"></CarTabbar>
	</div>
</template>

<script>
	import {
		Notify,
		Dialog 
	} from 'vant';

	export default {
		data() {
			return {
				tabbarName: "me",
				loading: true,
				isLogin: false,
				user: {}
			}
		},
		methods: {
			onRegLog() {
				this.$router.push('/login')
			},
			onMyCollect(userId) {
				this.$router.push({
					path: "/user/collect",
					query: {
						userId: userId
					}
				})
			},
			onMyInfo() {
				this.$router.push({
					path: "/user/info",
					query: {
						username: this.user.username,
						phone: this.user.phone
					}
				})
			},
			onQuestion(){
				Dialog.alert({
				  message: '如出现问题，请跟我联系'
				});
			},
			onAbout() {
				Dialog.alert({
				  title: '关于本网站',
				  message: '本网站只用来进行测试，不代表正式上线，如出现一些未知错误，敬请见谅！'
				});
			},
			onLogout() {
				this.$axios({
					method: 'post',
					url: '/logreg/logout',
					data: this.$qs.stringify({
						userId: this.user.userId
					})
				}).then((resp) => {
					if (resp.data.status === 200) {
						Notify({
							type: 'success',
							message: '退出成功'
						})
						this.$cookies.remove("user");
						this.isLogin = false;
					}
				})
			}
		},
		mounted() {
			// var user = JSON.parse(window.localStorage.getItem('user'));
			let user = this.$cookies.get('user');
			//cookies还在，说明还保存登录状态
			if (user != null) {
				this.user = user
				this.isLogin = true;
				this.loading = false;
				console.log("cookies还在，保存登录状态")
				// cookies失效
			} else {
				this.loading = false;
			}
		}
	}
</script>

<style scoped>
	.me-loading {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}

	.van-grid-item__icon+.van-grid-item__text {
		font-size: 15px;
		font-weight: bolder;
	}
</style>
